<template>
  <div class="song-List">
    <ul class="song-list-header" >
      <li v-for="(item,index) in staffListStyle" :key="index" @click="handleChangeView(item.name)" :class="{active:item.name===activeName}" >
        {{item.name}}
      </li>
    </ul>
    <div>
      <content-list :contentList="data"></content-list>
      <div class="pagination">
        <el-pagination @current-change="handleCurrentChange" backgroud layout="total,prev,pager,next"
                       :current-page="currentPage" :page-size="pageSize"
                       :total="albumDatas.length">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import ContentList from "../components/ContentList";
import {getAllStaffList, StaffListStyle} from "@/api";
import {staffListStyle} from "@/assets/data/staffList";


export default {
  name: "StaffList",
  components: {
    ContentList
  },
  data(){
    return{
      albumDatas:[],//乐谱数据
      pageSize:15,//一页有15条数据
      currentPage:1,//默认第一页
      staffListStyle:[],//乐谱集风格
      activeName:''//当前风格
    }
  },
  computed:{
    //计算当前表格中的数据
    data(){
      return this.albumDatas.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
    }
  },

  mounted() {
    this.staffListStyle = staffListStyle
    this.getStaffList()
    this.activeName = '全部乐谱集'
  },
  methods: {
    //通过模糊查询返回乐谱集列表
    getStaffList() {
      getAllStaffList().then(res => {
        this.currentPage = 1
        this.albumDatas = res.data
      })
    },
    //获取当前页
    handleCurrentChange(val) {
      this.currentPage = val
    },
    //根据style显示对应的乐谱集
    handleChangeView(name) {
      this.activeName = name;
      this.albumDatas = [];
      if (name === '全部乐谱集') {
        this.getStaffList();
      } else {
        this.goStaffListOfStyle(name)
      }
    },
    //根据style查询对应的乐谱集
    goStaffListOfStyle(style) {
      StaffListStyle(style).then(res => {
        this.currentPage = 1
        this.albumDatas = res.data
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@import "../assets/css/song-List.scss";
</style>
